// src/App.tsx
import { useRoutes } from 'react-router-dom'
import routes from '@/router'
import { Suspense, useEffect } from 'react'
import AppHeader from '@/components/app-header'
import AppFooter from '@/components/app-footer'
import AppPlayerBar from '@/pages/player/app-player-bar'
import { useAppDispatch } from './Hooks/hook'
import { fetchCurrentSongAction } from './stores/modules/player'

export default function App() {
  //获取某首歌
  const dispatch = useAppDispatch()
  useEffect(() => {
    dispatch(fetchCurrentSongAction(209639))
  }, [])

  return (
    <div className="App">
      {/* 页面头部 */}
      <AppHeader />

      {/* 页面主体 */}
      <Suspense fallback="">
        <div className="main">{useRoutes(routes)}</div>
      </Suspense>

      {/* 页面底部 */}
      <AppFooter />
      {/* 播放器工具栏 */}
      <AppPlayerBar></AppPlayerBar>
    </div>
  )
}
